@use 'var';

.szh-menu-container--theme-dark .szh-menu {
  color: var.$color-dark;
  background-color: var.$background-color-dark;
  border: 1px solid var.$border-color-dark;
  box-shadow: 0 2px 9px 3px rgba(0, 0, 0, 0.25);

  &__arrow {
    background-color: var.$background-color-dark;
    border-left-color: var.$border-color-dark;
    border-top-color: var.$border-color-dark;
  }

  &__item {
    &--hover {
      background-color: var.$background-color-hover-dark;
    }
    &--focusable {
      background-color: inherit;
    }
    &--disabled {
      color: var.$color-disabled-dark;
    }
  }

  &__divider {
    background-color: var.$divider-color-dark;
  }
}
